<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

    <title>Profile Page - Friends</title>

    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="Bootstrap/dist/css/bootstrap-reboot.css">
    <link rel="stylesheet" type="text/css" href="Bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="Bootstrap/dist/css/bootstrap-grid.css">

    <!-- Main Styles CSS -->
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/fonts.min.css">

    <!-- Main Font -->
    <script src="js/libs/webfontloader.min.js"></script>
    <script>
        WebFont.load({
            google: {
                families: ['Roboto:300,400,500,700:latin']
            }
        });
    </script>


</head>
<body class="page-has-left-panels page-has-right-panels">
<div id="wholeContent">

    <!-- Preloader -->

    <div id="hellopreloader">
        <div class="preloader">
            <svg width="45" height="45" stroke="#fff">
                <g fill="none" fill-rule="evenodd" stroke-width="2" transform="translate(1 1)">
                    <circle cx="22" cy="22" r="6" stroke="none">
                        <animate attributeName="r" begin="1.5s" calcMode="linear" dur="3s" repeatCount="indefinite"
                                 values="6;22"/>
                        <animate attributeName="stroke-opacity" begin="1.5s" calcMode="linear" dur="3s"
                                 repeatCount="indefinite" values="1;0"/>
                        <animate attributeName="stroke-width" begin="1.5s" calcMode="linear" dur="3s"
                                 repeatCount="indefinite" values="2;0"/>
                    </circle>
                    <circle cx="22" cy="22" r="6" stroke="none">
                        <animate attributeName="r" begin="3s" calcMode="linear" dur="3s" repeatCount="indefinite"
                                 values="6;22"/>
                        <animate attributeName="stroke-opacity" begin="3s" calcMode="linear" dur="3s"
                                 repeatCount="indefinite" values="1;0"/>
                        <animate attributeName="stroke-width" begin="3s" calcMode="linear" dur="3s"
                                 repeatCount="indefinite" values="2;0"/>
                    </circle>
                    <circle cx="22" cy="22" r="8">
                        <animate attributeName="r" begin="0s" calcMode="linear" dur="1.5s" repeatCount="indefinite"
                                 values="6;1;2;3;4;5;6"/>
                    </circle>
                </g>
            </svg>

            <div class="text">Loading ...</div>
        </div>
    </div>

    <!-- ... end Preloader -->


    <!-- Fixed Sidebar Left -->

    <div th:replace="~{leftSidebar :: leftSidebar}"></div>

    <!-- ... end Fixed Sidebar Left -->


    <!-- Fixed Sidebar Left -->

    <div class="fixed-sidebar fixed-sidebar-responsive">

        <div class="fixed-sidebar-left sidebar--small" id="sidebar-left-responsive">
            <a href="#" class="logo js-sidebar-open">
                <img src="img/logo.png" alt="Olympus">
            </a>

        </div>

        <div class="fixed-sidebar-left sidebar--large" id="sidebar-left-1-responsive">
            <a href="#" class="logo">
                <div class="img-wrap">
                    <img src="img/logo.png" alt="Olympus">
                </div>
                <div class="title-block">
                    <h6 class="logo-title">olympus</h6>
                </div>
            </a>

            <div class="mCustomScrollbar" data-mcs-theme="dark">

                <div class="control-block">
                    <div class="author-page author vcard inline-items">
                        <div class="author-thumb">
                            <img alt="author" src="img/author-page.jpg" class="avatar">
                            <span class="icon-status online"></span>
                        </div>
                        <a th:href="@{/ProfilePage}" class="author-name fn">
                            <div class="author-title">
                                James Spiegel
                                <svg class="olymp-dropdown-arrow-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-dropdown-arrow-icon"></use>
                                </svg>
                            </div>
                            <span class="author-subtitle">SPACE COWBOY</span>
                        </a>
                    </div>
                </div>

                <div class="ui-block-title ui-block-title-small">
                    <h6 class="title">MAIN SECTIONS</h6>
                </div>

                <ul class="left-menu">
                    <li>
                        <a href="#" class="js-sidebar-open">
                            <svg class="olymp-close-icon left-menu-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-close-icon"></use>
                            </svg>
                            <span class="left-menu-title">Collapse Menu</span>
                        </a>
                    </li>
                    <li>
                        <a href="mobile-index.html">
                            <svg class="olymp-newsfeed-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                                 data-original-title="NEWSFEED">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-newsfeed-icon"></use>
                            </svg>
                            <span class="left-menu-title">Newsfeed</span>
                        </a>
                    </li>
                    <li>
                        <a href="Mobile-28-YourAccount-PersonalInformation.html">
                            <svg class="olymp-star-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                                 data-original-title="FAV PAGE">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-star-icon"></use>
                            </svg>
                            <span class="left-menu-title">Fav Pages Feed</span>
                        </a>
                    </li>
                    <li>
                        <a href="mobile-29-YourAccount-AccountSettings.html">
                            <svg class="olymp-happy-faces-icon left-menu-icon" data-toggle="tooltip"
                                 data-placement="right" data-original-title="FRIEND GROUPS">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-happy-faces-icon"></use>
                            </svg>
                            <span class="left-menu-title">Friend Groups</span>
                        </a>
                    </li>
                    <li>
                        <a href="Mobile-30-YourAccount-ChangePassword.html">
                            <svg class="olymp-headphones-icon left-menu-icon" data-toggle="tooltip"
                                 data-placement="right" data-original-title="MUSIC&PLAYLISTS">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-headphones-icon"></use>
                            </svg>
                            <span class="left-menu-title">Music & Playlists</span>
                        </a>
                    </li>
                    <li>
                        <a href="Mobile-31-YourAccount-HobbiesAndInterests.html">
                            <svg class="olymp-weather-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                                 data-original-title="WEATHER APP">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-weather-icon"></use>
                            </svg>
                            <span class="left-menu-title">Weather App</span>
                        </a>
                    </li>
                    <li>
                        <a href="Mobile-32-YourAccount-EducationAndEmployement.html">
                            <svg class="olymp-calendar-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                                 data-original-title="CALENDAR AND EVENTS">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-calendar-icon"></use>
                            </svg>
                            <span class="left-menu-title">Calendar and Events</span>
                        </a>
                    </li>
                    <li>
                        <a href="Mobile-33-YourAccount-Notifications.html">
                            <svg class="olymp-badge-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                                 data-original-title="Community Badges">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-badge-icon"></use>
                            </svg>
                            <span class="left-menu-title">Community Badges</span>
                        </a>
                    </li>
                    <li>
                        <a href="Mobile-34-YourAccount-ChatMessages.html">
                            <svg class="olymp-cupcake-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                                 data-original-title="Friends Birthdays">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-cupcake-icon"></use>
                            </svg>
                            <span class="left-menu-title">Friends Birthdays</span>
                        </a>
                    </li>
                    <li>
                        <a href="Mobile-35-YourAccount-FriendsRequests.html">
                            <svg class="olymp-stats-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                                 data-original-title="Account Stats">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-stats-icon"></use>
                            </svg>
                            <span class="left-menu-title">Account Stats</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <svg class="olymp-manage-widgets-icon left-menu-icon" data-toggle="tooltip"
                                 data-placement="right" data-original-title="Manage Widgets">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-manage-widgets-icon"></use>
                            </svg>
                            <span class="left-menu-title">Manage Widgets</span>
                        </a>
                    </li>
                </ul>

                <div class="ui-block-title ui-block-title-small">
                    <h6 class="title">YOUR ACCOUNT</h6>
                </div>

                <ul class="account-settings">
                    <li>
                        <a href="#">

                            <svg class="olymp-menu-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-menu-icon"></use>
                            </svg>

                            <span>Profile Settings</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <svg class="olymp-star-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                                 data-original-title="FAV PAGE">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-star-icon"></use>
                            </svg>

                            <span>Create Fav Page</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <svg class="olymp-logout-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-logout-icon"></use>
                            </svg>

                            <span>Log Out</span>
                        </a>
                    </li>
                </ul>

                <div class="ui-block-title ui-block-title-small">
                    <h6 class="title">About Olympus</h6>
                </div>

                <ul class="about-olympus">
                    <li>
                        <a href="#">
                            <span>Terms and Conditions</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>FAQs</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>Careers</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>Contact</span>
                        </a>
                    </li>
                </ul>

            </div>
        </div>
    </div>

    <!-- ... end Fixed Sidebar Left -->


    <!-- Fixed Sidebar Right -->

    <div th:replace="~{rightSidebar :: rightSiebar}"></div>

    <!-- ... end Fixed Sidebar Right -->


    <!-- Fixed Sidebar Right-Responsive -->

    <div class="fixed-sidebar right fixed-sidebar-responsive" id="sidebar-right-responsive">

        <div class="fixed-sidebar-right sidebar--small">
            <a href="#" class="js-sidebar-open">
                <svg class="olymp-menu-icon">
                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-menu-icon"></use>
                </svg>
                <svg class="olymp-close-icon">
                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-close-icon"></use>
                </svg>
            </a>
        </div>

        <div class="fixed-sidebar-right sidebar--large">
            <div class="mCustomScrollbar" data-mcs-theme="dark">

                <div class="ui-block-title ui-block-title-small">
                    <a href="#" class="title">Close Friends</a>
                    <a href="#">Settings</a>
                </div>

                <ul class="chat-users">
                    <li class="inline-items js-chat-open">

                        <div class="author-thumb">
                            <img alt="author" src="img/avatar67-sm.jpg" class="avatar">
                            <span class="icon-status online"></span>
                        </div>

                        <div class="author-status">
                            <a href="#" class="h6 author-name">Carol Summers</a>
                            <span class="status">ONLINE</span>
                        </div>

                        <div class="more">
                            <svg class="olymp-three-dots-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                            </svg>

                            <ul class="more-icons">
                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon"></use>
                                    </svg>
                                </li>

                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="ADD TO CONVERSATION"
                                         class="olymp-add-to-conversation-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon"></use>
                                    </svg>
                                </li>

                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon"></use>
                                    </svg>
                                </li>
                            </ul>

                        </div>

                    </li>
                    <li class="inline-items js-chat-open">

                        <div class="author-thumb">
                            <img alt="author" src="img/avatar62-sm.jpg" class="avatar">
                            <span class="icon-status online"></span>
                        </div>

                        <div class="author-status">
                            <a href="#" class="h6 author-name">Mathilda Brinker</a>
                            <span class="status">AT WORK!</span>
                        </div>

                        <div class="more">
                            <svg class="olymp-three-dots-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                            </svg>

                            <ul class="more-icons">
                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon"></use>
                                    </svg>
                                </li>

                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="ADD TO CONVERSATION"
                                         class="olymp-add-to-conversation-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon"></use>
                                    </svg>
                                </li>

                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon"></use>
                                    </svg>
                                </li>
                            </ul>

                        </div>

                    </li>

                    <li class="inline-items js-chat-open">


                        <div class="author-thumb">
                            <img alt="author" src="img/avatar68-sm.jpg" class="avatar">
                            <span class="icon-status online"></span>
                        </div>

                        <div class="author-status">
                            <a href="#" class="h6 author-name">Carol Summers</a>
                            <span class="status">ONLINE</span>
                        </div>

                        <div class="more">
                            <svg class="olymp-three-dots-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                            </svg>

                            <ul class="more-icons">
                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon"></use>
                                    </svg>
                                </li>

                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="ADD TO CONVERSATION"
                                         class="olymp-add-to-conversation-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon"></use>
                                    </svg>
                                </li>

                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon"></use>
                                    </svg>
                                </li>
                            </ul>

                        </div>


                    </li>

                    <li class="inline-items js-chat-open">


                        <div class="author-thumb">
                            <img alt="author" src="img/avatar69-sm.jpg" class="avatar">
                            <span class="icon-status away"></span>
                        </div>

                        <div class="author-status">
                            <a href="#" class="h6 author-name">Michael Maximoff</a>
                            <span class="status">AWAY</span>
                        </div>

                        <div class="more">
                            <svg class="olymp-three-dots-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                            </svg>

                            <ul class="more-icons">
                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon"></use>
                                    </svg>
                                </li>

                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="ADD TO CONVERSATION"
                                         class="olymp-add-to-conversation-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon"></use>
                                    </svg>
                                </li>

                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon"></use>
                                    </svg>
                                </li>
                            </ul>

                        </div>


                    </li>

                    <li class="inline-items js-chat-open">


                        <div class="author-thumb">
                            <img alt="author" src="img/avatar70-sm.jpg" class="avatar">
                            <span class="icon-status disconected"></span>
                        </div>

                        <div class="author-status">
                            <a href="#" class="h6 author-name">Rachel Howlett</a>
                            <span class="status">OFFLINE</span>
                        </div>

                        <div class="more">
                            <svg class="olymp-three-dots-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                            </svg>

                            <ul class="more-icons">
                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon"></use>
                                    </svg>
                                </li>

                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="ADD TO CONVERSATION"
                                         class="olymp-add-to-conversation-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon"></use>
                                    </svg>
                                </li>

                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon"></use>
                                    </svg>
                                </li>
                            </ul>

                        </div>


                    </li>
                </ul>


                <div class="ui-block-title ui-block-title-small">
                    <a href="#" class="title">MY FAMILY</a>
                    <a href="#">Settings</a>
                </div>

                <ul class="chat-users">
                    <li class="inline-items js-chat-open">

                        <div class="author-thumb">
                            <img alt="author" src="img/avatar64-sm.jpg" class="avatar">
                            <span class="icon-status online"></span>
                        </div>

                        <div class="author-status">
                            <a href="#" class="h6 author-name">Sarah Hetfield</a>
                            <span class="status">ONLINE</span>
                        </div>

                        <div class="more">
                            <svg class="olymp-three-dots-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                            </svg>

                            <ul class="more-icons">
                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon"></use>
                                    </svg>
                                </li>

                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="ADD TO CONVERSATION"
                                         class="olymp-add-to-conversation-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon"></use>
                                    </svg>
                                </li>

                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon"></use>
                                    </svg>
                                </li>
                            </ul>

                        </div>
                    </li>
                </ul>


                <div class="ui-block-title ui-block-title-small">
                    <a href="#" class="title">UNCATEGORIZED</a>
                    <a href="#">Settings</a>
                </div>

                <ul class="chat-users">
                    <li class="inline-items js-chat-open">

                        <div class="author-thumb">
                            <img alt="author" src="img/avatar71-sm.jpg" class="avatar">
                            <span class="icon-status online"></span>
                        </div>

                        <div class="author-status">
                            <a href="#" class="h6 author-name">Bruce Peterson</a>
                            <span class="status">ONLINE</span>
                        </div>

                        <div class="more">
                            <svg class="olymp-three-dots-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                            </svg>

                            <ul class="more-icons">
                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon"></use>
                                    </svg>
                                </li>

                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="ADD TO CONVERSATION"
                                         class="olymp-add-to-conversation-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon"></use>
                                    </svg>
                                </li>

                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon"></use>
                                    </svg>
                                </li>
                            </ul>

                        </div>


                    </li>
                    <li class="inline-items js-chat-open">

                        <div class="author-thumb">
                            <img alt="author" src="img/avatar72-sm.jpg" class="avatar">
                            <span class="icon-status away"></span>
                        </div>

                        <div class="author-status">
                            <a href="#" class="h6 author-name">Chris Greyson</a>
                            <span class="status">AWAY</span>
                        </div>

                        <div class="more">
                            <svg class="olymp-three-dots-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                            </svg>

                            <ul class="more-icons">
                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon"></use>
                                    </svg>
                                </li>

                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="ADD TO CONVERSATION"
                                         class="olymp-add-to-conversation-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon"></use>
                                    </svg>
                                </li>

                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon"></use>
                                    </svg>
                                </li>
                            </ul>

                        </div>

                    </li>
                    <li class="inline-items js-chat-open">

                        <div class="author-thumb">
                            <img alt="author" src="img/avatar63-sm.jpg" class="avatar">
                            <span class="icon-status status-invisible"></span>
                        </div>

                        <div class="author-status">
                            <a href="#" class="h6 author-name">Nicholas Grisom</a>
                            <span class="status">INVISIBLE</span>
                        </div>

                        <div class="more">
                            <svg class="olymp-three-dots-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                            </svg>

                            <ul class="more-icons">
                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon"></use>
                                    </svg>
                                </li>

                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="ADD TO CONVERSATION"
                                         class="olymp-add-to-conversation-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon"></use>
                                    </svg>
                                </li>

                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon"></use>
                                    </svg>
                                </li>
                            </ul>

                        </div>
                    </li>
                    <li class="inline-items js-chat-open">

                        <div class="author-thumb">
                            <img alt="author" src="img/avatar72-sm.jpg" class="avatar">
                            <span class="icon-status away"></span>
                        </div>

                        <div class="author-status">
                            <a href="#" class="h6 author-name">Chris Greyson</a>
                            <span class="status">AWAY</span>
                        </div>

                        <div class="more">
                            <svg class="olymp-three-dots-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                            </svg>

                            <ul class="more-icons">
                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon"></use>
                                    </svg>
                                </li>

                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="ADD TO CONVERSATION"
                                         class="olymp-add-to-conversation-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon"></use>
                                    </svg>
                                </li>

                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon"></use>
                                    </svg>
                                </li>
                            </ul>

                        </div>
                    </li>
                    <li class="inline-items js-chat-open">

                        <div class="author-thumb">
                            <img alt="author" src="img/avatar71-sm.jpg" class="avatar">
                            <span class="icon-status online"></span>
                        </div>

                        <div class="author-status">
                            <a href="#" class="h6 author-name">Bruce Peterson</a>
                            <span class="status">ONLINE</span>
                        </div>

                        <div class="more">
                            <svg class="olymp-three-dots-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                            </svg>

                            <ul class="more-icons">
                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon"></use>
                                    </svg>
                                </li>

                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="ADD TO CONVERSATION"
                                         class="olymp-add-to-conversation-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon"></use>
                                    </svg>
                                </li>

                                <li>
                                    <svg data-toggle="tooltip" data-placement="top"
                                         data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon"></use>
                                    </svg>
                                </li>
                            </ul>

                        </div>
                    </li>
                </ul>

            </div>

            <div class="search-friend inline-items">
                <form class="form-group">
                    <input class="form-control" placeholder="Search Friends..." value="" type="text">
                </form>

                <a href="accountSettings.html" class="settings">
                    <svg class="olymp-settings-icon">
                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-settings-icon"></use>
                    </svg>
                </a>

                <a href="#" class="js-sidebar-open">
                    <svg class="olymp-close-icon">
                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-close-icon"></use>
                    </svg>
                </a>
            </div>

            <a href="#" class="olympus-chat inline-items js-chat-open">

                <h6 class="olympus-chat-title">OLYMPUS CHAT</h6>
                <svg class="olymp-chat---messages-icon">
                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-chat---messages-icon"></use>
                </svg>
            </a>
        </div>

    </div>

    <!-- ... end Fixed Sidebar Right-Responsive -->


    <!-- Header-BP -->

    <header th:replace="~{header :: header}"></header>

    <!-- ... end Header-BP -->


    <!-- Responsive Header-BP -->

    <header class="header header-responsive" id="site-header-responsive">

        <div class="header-content-wrapper">
            <ul class="nav nav-tabs mobile-app-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#request" role="tab">
                        <div class="control-icon has-items">
                            <svg class="olymp-happy-face-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-happy-face-icon"></use>
                            </svg>
                            <div class="label-avatar bg-blue">6</div>
                        </div>
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#chat" role="tab">
                        <div class="control-icon has-items">
                            <svg class="olymp-chat---messages-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-chat---messages-icon"></use>
                            </svg>
                            <div class="label-avatar bg-purple">2</div>
                        </div>
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#notification" role="tab">
                        <div class="control-icon has-items">
                            <svg class="olymp-thunder-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-thunder-icon"></use>
                            </svg>
                            <div class="label-avatar bg-primary">8</div>
                        </div>
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#search" role="tab">
                        <svg class="olymp-magnifying-glass-icon">
                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-magnifying-glass-icon"></use>
                        </svg>
                        <svg class="olymp-close-icon">
                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-close-icon"></use>
                        </svg>
                    </a>
                </li>
            </ul>
        </div>

        <!-- Tab panes -->
        <div class="tab-content tab-content-responsive">

            <div class="tab-pane " id="request" role="tabpanel">

                <div class="mCustomScrollbar" data-mcs-theme="dark">
                    <div class="ui-block-title ui-block-title-small">
                        <h6 class="title">FRIEND REQUESTS</h6>
                        <a href="#">Find Friends</a>
                        <a href="#">Settings</a>
                    </div>
                    <ul class="notification-list friend-requests">
                        <li>
                            <div class="author-thumb">
                                <img src="img/avatar55-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <a href="#" class="h6 notification-friend">Tamara Romanoff</a>
                                <span class="chat-message-item">Mutual Friend: Sarah Hetfield</span>
                            </div>
                            <span class="notification-icon">
										<a href="#" class="accept-request">
											<span class="icon-add without-text">
												<svg class="olymp-happy-face-icon"><use
                                                        xlink:href="svg-icons/sprites/icons.svg#olymp-happy-face-icon"></use></svg>
											</span>
										</a>

										<a href="#" class="accept-request request-del">
											<span class="icon-minus">
												<svg class="olymp-happy-face-icon"><use
                                                        xlink:href="svg-icons/sprites/icons.svg#olymp-happy-face-icon"></use></svg>
											</span>
										</a>

									</span>

                            <div class="more">
                                <svg class="olymp-three-dots-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                </svg>
                            </div>
                        </li>
                        <li>
                            <div class="author-thumb">
                                <img src="img/avatar56-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <a href="#" class="h6 notification-friend">Tony Stevens</a>
                                <span class="chat-message-item">4 Friends in Common</span>
                            </div>
                            <span class="notification-icon">
										<a href="#" class="accept-request">
											<span class="icon-add without-text">
												<svg class="olymp-happy-face-icon"><use
                                                        xlink:href="svg-icons/sprites/icons.svg#olymp-happy-face-icon"></use></svg>
											</span>
										</a>

										<a href="#" class="accept-request request-del">
											<span class="icon-minus">
												<svg class="olymp-happy-face-icon"><use
                                                        xlink:href="svg-icons/sprites/icons.svg#olymp-happy-face-icon"></use></svg>
											</span>
										</a>

									</span>

                            <div class="more">
                                <svg class="olymp-three-dots-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                </svg>
                            </div>
                        </li>
                        <li class="accepted">
                            <div class="author-thumb">
                                <img src="img/avatar57-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                You and <a href="#" class="h6 notification-friend">Mary Jane Stark</a> just became
                                friends. Write on <a href="#" class="notification-link">her wall</a>.
                            </div>
                            <span class="notification-icon">
										<svg class="olymp-happy-face-icon"><use
                                                xlink:href="svg-icons/sprites/icons.svg#olymp-happy-face-icon"></use></svg>
									</span>

                            <div class="more">
                                <svg class="olymp-three-dots-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                </svg>
                                <svg class="olymp-little-delete">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-little-delete"></use>
                                </svg>
                            </div>
                        </li>
                        <li>
                            <div class="author-thumb">
                                <img src="img/avatar58-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <a href="#" class="h6 notification-friend">Stagg Clothing</a>
                                <span class="chat-message-item">9 Friends in Common</span>
                            </div>
                            <span class="notification-icon">
										<a href="#" class="accept-request">
											<span class="icon-add without-text">
												<svg class="olymp-happy-face-icon"><use
                                                        xlink:href="svg-icons/sprites/icons.svg#olymp-happy-face-icon"></use></svg>
											</span>
										</a>

										<a href="#" class="accept-request request-del">
											<span class="icon-minus">
												<svg class="olymp-happy-face-icon"><use
                                                        xlink:href="svg-icons/sprites/icons.svg#olymp-happy-face-icon"></use></svg>
											</span>
										</a>

									</span>

                            <div class="more">
                                <svg class="olymp-three-dots-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                </svg>
                            </div>
                        </li>
                    </ul>
                    <a href="#" class="view-all bg-blue">Check all your Events</a>
                </div>

            </div>

            <div class="tab-pane " id="chat" role="tabpanel">

                <div class="mCustomScrollbar" data-mcs-theme="dark">
                    <div class="ui-block-title ui-block-title-small">
                        <h6 class="title">Chat / Messages</h6>
                        <a href="#">Mark all as read</a>
                        <a href="#">Settings</a>
                    </div>

                    <ul class="notification-list chat-message">
                        <li class="message-unread">
                            <div class="author-thumb">
                                <img src="img/avatar59-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <a href="#" class="h6 notification-friend">Diana Jameson</a>
                                <span class="chat-message-item">Hi James! It’s Diana, I just wanted to let you know that we have to reschedule...</span>
                                <span class="notification-date"><time class="entry-date updated"
                                                                      datetime="2004-07-24T18:18">4 hours ago</time></span>
                            </div>
                            <span class="notification-icon">
										<svg class="olymp-chat---messages-icon"><use
                                                xlink:href="svg-icons/sprites/icons.svg#olymp-chat---messages-icon"></use></svg>
									</span>
                            <div class="more">
                                <svg class="olymp-three-dots-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                </svg>
                            </div>
                        </li>

                        <li>
                            <div class="author-thumb">
                                <img src="img/avatar60-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <a href="#" class="h6 notification-friend">Jake Parker</a>
                                <span class="chat-message-item">Great, I’ll see you tomorrow!.</span>
                                <span class="notification-date"><time class="entry-date updated"
                                                                      datetime="2004-07-24T18:18">4 hours ago</time></span>
                            </div>
                            <span class="notification-icon">
										<svg class="olymp-chat---messages-icon"><use
                                                xlink:href="svg-icons/sprites/icons.svg#olymp-chat---messages-icon"></use></svg>
									</span>

                            <div class="more">
                                <svg class="olymp-three-dots-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                </svg>
                            </div>
                        </li>
                        <li>
                            <div class="author-thumb">
                                <img src="img/avatar61-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <a href="#" class="h6 notification-friend">Elaine Dreyfuss</a>
                                <span class="chat-message-item">We’ll have to check that at the office and see if the client is on board with...</span>
                                <span class="notification-date"><time class="entry-date updated"
                                                                      datetime="2004-07-24T18:18">Yesterday at 9:56pm</time></span>
                            </div>
                            <span class="notification-icon">
											<svg class="olymp-chat---messages-icon"><use
                                                    xlink:href="svg-icons/sprites/icons.svg#olymp-chat---messages-icon"></use></svg>
										</span>
                            <div class="more">
                                <svg class="olymp-three-dots-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                </svg>
                            </div>
                        </li>

                        <li class="chat-group">
                            <div class="author-thumb">
                                <img src="img/avatar11-sm.jpg" alt="author">
                                <img src="img/avatar12-sm.jpg" alt="author">
                                <img src="img/avatar13-sm.jpg" alt="author">
                                <img src="img/avatar10-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <a href="#" class="h6 notification-friend">You, Faye, Ed &amp; Jet +3</a>
                                <span class="last-message-author">Ed:</span>
                                <span class="chat-message-item">Yeah! Seems fine by me!</span>
                                <span class="notification-date"><time class="entry-date updated"
                                                                      datetime="2004-07-24T18:18">March 16th at 10:23am</time></span>
                            </div>
                            <span class="notification-icon">
											<svg class="olymp-chat---messages-icon"><use
                                                    xlink:href="svg-icons/sprites/icons.svg#olymp-chat---messages-icon"></use></svg>
										</span>
                            <div class="more">
                                <svg class="olymp-three-dots-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                </svg>
                            </div>
                        </li>
                    </ul>

                    <a href="#" class="view-all bg-purple">View All Messages</a>
                </div>

            </div>

            <div class="tab-pane " id="notification" role="tabpanel">

                <div class="mCustomScrollbar" data-mcs-theme="dark">
                    <div class="ui-block-title ui-block-title-small">
                        <h6 class="title">Notifications</h6>
                        <a href="#">Mark all as read</a>
                        <a href="#">Settings</a>
                    </div>

                    <ul class="notification-list">
                        <li>
                            <div class="author-thumb">
                                <img src="img/avatar62-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <div><a href="#" class="h6 notification-friend">Mathilda Brinker</a> commented on your
                                    new <a href="#" class="notification-link">profile status</a>.
                                </div>
                                <span class="notification-date"><time class="entry-date updated"
                                                                      datetime="2004-07-24T18:18">4 hours ago</time></span>
                            </div>
                            <span class="notification-icon">
											<svg class="olymp-comments-post-icon"><use
                                                    xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon"></use></svg>
										</span>

                            <div class="more">
                                <svg class="olymp-three-dots-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                </svg>
                                <svg class="olymp-little-delete">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-little-delete"></use>
                                </svg>
                            </div>
                        </li>

                        <li class="un-read">
                            <div class="author-thumb">
                                <img src="img/avatar63-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <div>You and <a href="#" class="h6 notification-friend">Nicholas Grissom</a> just became
                                    friends. Write on <a href="#" class="notification-link">his wall</a>.
                                </div>
                                <span class="notification-date"><time class="entry-date updated"
                                                                      datetime="2004-07-24T18:18">9 hours ago</time></span>
                            </div>
                            <span class="notification-icon">
											<svg class="olymp-happy-face-icon"><use
                                                    xlink:href="svg-icons/sprites/icons.svg#olymp-happy-face-icon"></use></svg>
										</span>

                            <div class="more">
                                <svg class="olymp-three-dots-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                </svg>
                                <svg class="olymp-little-delete">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-little-delete"></use>
                                </svg>
                            </div>
                        </li>

                        <li class="with-comment-photo">
                            <div class="author-thumb">
                                <img src="img/avatar64-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <div><a href="#" class="h6 notification-friend">Sarah Hetfield</a> commented on your <a
                                        href="#" class="notification-link">photo</a>.
                                </div>
                                <span class="notification-date"><time class="entry-date updated"
                                                                      datetime="2004-07-24T18:18">Yesterday at 5:32am</time></span>
                            </div>
                            <span class="notification-icon">
											<svg class="olymp-comments-post-icon"><use
                                                    xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon"></use></svg>
										</span>

                            <div class="comment-photo">
                                <img src="img/comment-photo1.jpg" alt="photo">
                                <span>“She looks incredible in that outfit! We should see each...”</span>
                            </div>

                            <div class="more">
                                <svg class="olymp-three-dots-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                </svg>
                                <svg class="olymp-little-delete">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-little-delete"></use>
                                </svg>
                            </div>
                        </li>

                        <li>
                            <div class="author-thumb">
                                <img src="img/avatar65-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <div><a href="#" class="h6 notification-friend">Green Goo Rock</a> invited you to attend
                                    to his event Goo in <a href="#" class="notification-link">Gotham Bar</a>.
                                </div>
                                <span class="notification-date"><time class="entry-date updated"
                                                                      datetime="2004-07-24T18:18">March 5th at 6:43pm</time></span>
                            </div>
                            <span class="notification-icon">
											<svg class="olymp-happy-face-icon"><use
                                                    xlink:href="svg-icons/sprites/icons.svg#olymp-happy-face-icon"></use></svg>
										</span>

                            <div class="more">
                                <svg class="olymp-three-dots-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                </svg>
                                <svg class="olymp-little-delete">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-little-delete"></use>
                                </svg>
                            </div>
                        </li>

                        <li>
                            <div class="author-thumb">
                                <img src="img/avatar66-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <div><a href="#" class="h6 notification-friend">James Summers</a> commented on your new
                                    <a href="#" class="notification-link">profile status</a>.
                                </div>
                                <span class="notification-date"><time class="entry-date updated"
                                                                      datetime="2004-07-24T18:18">March 2nd at 8:29pm</time></span>
                            </div>
                            <span class="notification-icon">
											<svg class="olymp-heart-icon"><use
                                                    xlink:href="svg-icons/sprites/icons.svg#olymp-heart-icon"></use></svg>
										</span>

                            <div class="more">
                                <svg class="olymp-three-dots-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                </svg>
                                <svg class="olymp-little-delete">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-little-delete"></use>
                                </svg>
                            </div>
                        </li>
                    </ul>

                    <a href="#" class="view-all bg-primary">View All Notifications</a>
                </div>

            </div>

            <div class="tab-pane " id="search" role="tabpanel">


                <form class="search-bar w-search notification-list friend-requests">
                    <div class="form-group with-button">
                        <input class="form-control js-user-search" placeholder="Search here people or pages..."
                               type="text">
                    </div>
                </form>


            </div>

        </div>
        <!-- ... end  Tab panes -->

    </header>

    <!-- ... end Responsive Header-BP -->
    <div class="header-spacer"></div>


    <!-- Top Header-Profile -->

    <div th:replace="~{commonProfileHeader :: header}"></div>
    <!-- ... end Top Header-Profile -->

    <div class="container">
        <div class="row">
            <div class="col col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="ui-block responsive-flex">
                    <div class="ui-block-title">
                        <div class="h6 title">
                            <span th:text="${session.loginUser.userName}"></span>的朋友们 (
                            <span th:text="${#request.getAttribute('friendsNumber')}"></span> ）
                        </div>
                        <form class="w-search">
                            <div class="form-group with-button">
                                <input class="form-control" type="text" placeholder="Search Friends...">
                                <button>
                                    <svg class="olymp-magnifying-glass-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-magnifying-glass-icon"></use>
                                    </svg>
                                </button>
                            </div>
                        </form>
                        <a href="#" class="more">
                            <svg class="olymp-three-dots-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Friends -->

    <div class="container">
        <div class="row">
            <div class="col col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12" th:each="friend : ${#request.getAttribute('friends')}">
                <div class="ui-block">
                    <!-- Friend Item -->
                    <div class="friend-item">
                        <div class="friend-header-thumb">
                            <img onerror="this.src='img/friend1.jpg'" alt="friend" th:src="${friend.homePage.imagePath}">
                        </div>

                        <div class="friend-item-content">

                            <div class="more">
                                <svg class="olymp-three-dots-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                </svg>
                                <ul class="more-dropdown">
                                    <li>
                                        <a href="#">Report Profile</a>
                                    </li>
                                    <li>
                                        <a href="#">Block Profile</a>
                                    </li>
                                    <li>
                                        <a href="#">Turn Off Notifications</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="friend-avatar">
                                <div class="author-thumb">
                                    <img src="img/avatar1.jpg" alt="author" th:src="${friend.user.imagePath}" style="width: 100px;height: 100px">
                                </div>
                                <div class="author-content">
                                    <a href="#" class="h5 author-name" th:text="${friend.user.userName}"></a>
                                    <div class="country" th:text="${friend.user.location}">San Francisco, CA</div>
                                </div>
                            </div>

                            <div class="swiper-container" data-slide="fade">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <div class="friend-count" data-swiper-parallax="-500">
                                            <a href="#" class="friend-count-item">
                                                <div class="h6">52</div>
                                                <div class="title">Friends</div>
                                            </a>
                                            <a href="#" class="friend-count-item">
                                                <div class="h6">240</div>
                                                <div class="title">Photos</div>
                                            </a>
                                            <a href="#" class="friend-count-item">
                                                <div class="h6">16</div>
                                                <div class="title">Videos</div>
                                            </a>
                                        </div>
                                        <div class="control-block-button" data-swiper-parallax="-100">
                                            <a href="#" class="btn btn-control bg-blue">
                                                <svg class="olymp-happy-face-icon">
                                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-happy-face-icon"></use>
                                                </svg>
                                            </a>

                                            <a href="#" class="btn btn-control bg-purple" onclick="profileFriendChat(this);return false;">
                                                <svg class="olymp-chat---messages-icon">
                                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-chat---messages-icon"></use>
                                                </svg>
                                            </a>

                                        </div>
                                    </div>

                                    <div class="swiper-slide">
                                        <p class="friend-about" data-swiper-parallax="-500" style="text-align: center" th:text="${friend.user.info}">
                                        </p>

                                        <div class="friend-since" data-swiper-parallax="-100">
                                            <span>从下面一刻起，你们成为了朋友：</span>
                                            <div class="h6" th:text="${friend.friend.time}">December 2014</div>
                                        </div>
                                    </div>
                                </div>

                                <!-- If we need pagination -->
                                <div class="swiper-pagination"></div>
                            </div>
                        </div>
                    </div>

                    <!-- ... end Friend Item -->            </div>
            </div>
            <!--<div class="col col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12">
                <div class="ui-block">

                    &lt;!&ndash; Friend Item &ndash;&gt;

                    <div class="friend-item">
                        <div class="friend-header-thumb">
                            <img src="img/friend2.jpg" alt="friend">
                        </div>

                        <div class="friend-item-content">

                            <div class="more">
                                <svg class="olymp-three-dots-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                </svg>
                                <ul class="more-dropdown">
                                    <li>
                                        <a href="#">Report Profile</a>
                                    </li>
                                    <li>
                                        <a href="#">Block Profile</a>
                                    </li>
                                    <li>
                                        <a href="#">Turn Off Notifications</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="friend-avatar">
                                <div class="author-thumb">
                                    <img src="img/avatar2.jpg" alt="author">
                                </div>
                                <div class="author-content">
                                    <a href="#" class="h5 author-name">Marina Valentine</a>
                                    <div class="country">Long Island, NY</div>
                                </div>
                            </div>

                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <div class="friend-count" data-swiper-parallax="-500">
                                            <a href="#" class="friend-count-item">
                                                <div class="h6">52</div>
                                                <div class="title">Friends</div>
                                            </a>
                                            <a href="#" class="friend-count-item">
                                                <div class="h6">240</div>
                                                <div class="title">Photos</div>
                                            </a>
                                            <a href="#" class="friend-count-item">
                                                <div class="h6">16</div>
                                                <div class="title">Videos</div>
                                            </a>
                                        </div>
                                        <div class="control-block-button" data-swiper-parallax="-100">
                                            <a href="#" class="btn btn-control bg-blue">
                                                <svg class="olymp-happy-face-icon">
                                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-happy-face-icon"></use>
                                                </svg>
                                            </a>

                                            <a href="#" class="btn btn-control bg-purple">
                                                <svg class="olymp-chat-&#45;&#45;messages-icon">
                                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-chat-&#45;&#45;messages-icon"></use>
                                                </svg>
                                            </a>

                                        </div>
                                    </div>

                                    <div class="swiper-slide">
                                        <p class="friend-about" data-swiper-parallax="-500">
                                            Hi!, I’m Marina and I’m a Community Manager for “Gametube”. Gamer and
                                            full-time mother.
                                        </p>

                                        <div class="friend-since" data-swiper-parallax="-100">
                                            <span>Friends Since:</span>
                                            <div class="h6">December 2014</div>
                                        </div>
                                    </div>
                                </div>

                                &lt;!&ndash; If we need pagination &ndash;&gt;
                                <div class="swiper-pagination"></div>
                            </div>
                        </div>
                    </div>

                    &lt;!&ndash; ... end Friend Item &ndash;&gt;            </div>
            </div>
            <div class="col col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12">
                <div class="ui-block">

                    &lt;!&ndash; Friend Item &ndash;&gt;

                    <div class="friend-item">
                        <div class="friend-header-thumb">
                            <img src="img/friend3.jpg" alt="friend">
                        </div>

                        <div class="friend-item-content">

                            <div class="more">
                                <svg class="olymp-three-dots-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                </svg>
                                <ul class="more-dropdown">
                                    <li>
                                        <a href="#">Report Profile</a>
                                    </li>
                                    <li>
                                        <a href="#">Block Profile</a>
                                    </li>
                                    <li>
                                        <a href="#">Turn Off Notifications</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="friend-avatar">
                                <div class="author-thumb">
                                    <img src="img/avatar3.jpg" alt="author">
                                </div>
                                <div class="author-content">
                                    <a href="#" class="h5 author-name">Nicholas Grissom</a>
                                    <div class="country">Los Angeles, CA</div>
                                </div>
                            </div>

                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <div class="friend-count" data-swiper-parallax="-500">
                                            <a href="#" class="friend-count-item">
                                                <div class="h6">49</div>
                                                <div class="title">Friends</div>
                                            </a>
                                            <a href="#" class="friend-count-item">
                                                <div class="h6">132</div>
                                                <div class="title">Photos</div>
                                            </a>
                                            <a href="#" class="friend-count-item">
                                                <div class="h6">5</div>
                                                <div class="title">Videos</div>
                                            </a>
                                        </div>
                                        <div class="control-block-button" data-swiper-parallax="-100">
                                            <a href="#" class="btn btn-control bg-blue">
                                                <svg class="olymp-happy-face-icon">
                                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-happy-face-icon"></use>
                                                </svg>
                                            </a>

                                            <a href="#" class="btn btn-control bg-purple">
                                                <svg class="olymp-chat-&#45;&#45;messages-icon">
                                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-chat-&#45;&#45;messages-icon"></use>
                                                </svg>
                                            </a>

                                        </div>
                                    </div>

                                    <div class="swiper-slide">
                                        <p class="friend-about" data-swiper-parallax="-500">
                                            Hi!, I’m Marina and I’m a Community Manager for “Gametube”. Gamer and
                                            full-time mother.
                                        </p>

                                        <div class="friend-since" data-swiper-parallax="-100">
                                            <span>Friends Since:</span>
                                            <div class="h6">December 2014</div>
                                        </div>
                                    </div>
                                </div>

                                &lt;!&ndash; If we need pagination &ndash;&gt;
                                <div class="swiper-pagination"></div>
                            </div>
                        </div>
                    </div>

                    &lt;!&ndash; ... end Friend Item &ndash;&gt;            </div>
            </div>
            <div class="col col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12">
                <div class="ui-block">

                    &lt;!&ndash; Friend Item &ndash;&gt;

                    <div class="friend-item">
                        <div class="friend-header-thumb">
                            <img src="img/friend4.jpg" alt="friend">
                        </div>

                        <div class="friend-item-content">
                            <div class="more">
                                <svg class="olymp-three-dots-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                </svg>
                                <ul class="more-dropdown">
                                    <li>
                                        <a href="#">Report Profile</a>
                                    </li>
                                    <li>
                                        <a href="#">Block Profile</a>
                                    </li>
                                    <li>
                                        <a href="#">Turn Off Notifications</a>
                                    </li>
                                </ul>
                            </div>

                            <div class="friend-avatar">
                                <div class="author-thumb">
                                    <img src="img/avatar4.jpg" alt="author">
                                </div>
                                <div class="author-content">
                                    <a href="#" class="h5 author-name">Chris Greyson</a>
                                    <div class="country">Austin, TX</div>
                                </div>
                            </div>

                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <div class="friend-count" data-swiper-parallax="-500">
                                            <a href="#" class="friend-count-item">
                                                <div class="h6">65</div>
                                                <div class="title">Friends</div>
                                            </a>
                                            <a href="#" class="friend-count-item">
                                                <div class="h6">104</div>
                                                <div class="title">Photos</div>
                                            </a>
                                            <a href="#" class="friend-count-item">
                                                <div class="h6">12</div>
                                                <div class="title">Videos</div>
                                            </a>
                                        </div>
                                        <div class="control-block-button" data-swiper-parallax="-100">
                                            <a href="#" class="btn btn-control bg-blue">
                                                <svg class="olymp-happy-face-icon">
                                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-happy-face-icon"></use>
                                                </svg>
                                            </a>

                                            <a href="#" class="btn btn-control bg-purple">
                                                <svg class="olymp-chat-&#45;&#45;messages-icon">
                                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-chat-&#45;&#45;messages-icon"></use>
                                                </svg>
                                            </a>

                                        </div>
                                    </div>

                                    <div class="swiper-slide">
                                        <p class="friend-about" data-swiper-parallax="-500">
                                            Hi!, I’m Marina and I’m a Community Manager for “Gametube”. Gamer and
                                            full-time mother.
                                        </p>

                                        <div class="friend-since" data-swiper-parallax="-100">
                                            <span>Friends Since:</span>
                                            <div class="h6">December 2014</div>
                                        </div>
                                    </div>
                                </div>

                                &lt;!&ndash; If we need pagination &ndash;&gt;
                                <div class="swiper-pagination"></div>
                            </div>
                        </div>
                    </div>

                    &lt;!&ndash; ... end Friend Item &ndash;&gt;            </div>
            </div>
            <div class="col col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12">
                <div class="ui-block">

                    &lt;!&ndash; Friend Item &ndash;&gt;

                    <div class="friend-item">
                        <div class="friend-header-thumb">
                            <img src="img/friend5.jpg" alt="friend">
                        </div>

                        <div class="friend-item-content">

                            <div class="more">
                                <svg class="olymp-three-dots-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                </svg>
                                <ul class="more-dropdown">
                                    <li>
                                        <a href="#">Report Profile</a>
                                    </li>
                                    <li>
                                        <a href="#">Block Profile</a>
                                    </li>
                                    <li>
                                        <a href="#">Turn Off Notifications</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="friend-avatar">
                                <div class="author-thumb">
                                    <img src="img/avatar5.jpg" alt="author">
                                </div>
                                <div class="author-content">
                                    <a href="#" class="h5 author-name">Elaine Dreifuss</a>
                                    <div class="country">New York, NY</div>
                                </div>
                            </div>

                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <div class="friend-count" data-swiper-parallax="-500">
                                            <a href="#" class="friend-count-item">
                                                <div class="h6">82</div>
                                                <div class="title">Friends</div>
                                            </a>
                                            <a href="#" class="friend-count-item">
                                                <div class="h6">204</div>
                                                <div class="title">Photos</div>
                                            </a>
                                            <a href="#" class="friend-count-item">
                                                <div class="h6">27</div>
                                                <div class="title">Videos</div>
                                            </a>
                                        </div>
                                        <div class="control-block-button" data-swiper-parallax="-100">
                                            <a href="#" class="btn btn-control bg-blue">
                                                <svg class="olymp-happy-face-icon">
                                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-happy-face-icon"></use>
                                                </svg>
                                            </a>

                                            <a href="#" class="btn btn-control bg-purple">
                                                <svg class="olymp-chat-&#45;&#45;messages-icon">
                                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-chat-&#45;&#45;messages-icon"></use>
                                                </svg>
                                            </a>

                                        </div>
                                    </div>

                                    <div class="swiper-slide">
                                        <p class="friend-about" data-swiper-parallax="-500">
                                            Hi!, I’m Marina and I’m a Community Manager for “Gametube”. Gamer and
                                            full-time mother.
                                        </p>

                                        <div class="friend-since" data-swiper-parallax="-100">
                                            <span>Friends Since:</span>
                                            <div class="h6">December 2014</div>
                                        </div>
                                    </div>
                                </div>

                                &lt;!&ndash; If we need pagination &ndash;&gt;
                                <div class="swiper-pagination"></div>
                            </div>
                        </div>
                    </div>

                    &lt;!&ndash; ... end Friend Item &ndash;&gt;            </div>
            </div>
            <div class="col col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12">
                <div class="ui-block">

                    &lt;!&ndash; Friend Item &ndash;&gt;

                    <div class="friend-item">
                        <div class="friend-header-thumb">
                            <img src="img/friend6.jpg" alt="friend">
                        </div>

                        <div class="friend-item-content">

                            <div class="more">
                                <svg class="olymp-three-dots-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                </svg>
                                <ul class="more-dropdown">
                                    <li>
                                        <a href="#">Report Profile</a>
                                    </li>
                                    <li>
                                        <a href="#">Block Profile</a>
                                    </li>
                                    <li>
                                        <a href="#">Turn Off Notifications</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="friend-avatar">
                                <div class="author-thumb">
                                    <img src="img/avatar6.jpg" alt="author">
                                </div>
                                <div class="author-content">
                                    <a href="#" class="h5 author-name">Bruce Peterson</a>
                                    <div class="country">Austin, TX</div>
                                </div>
                            </div>

                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <div class="friend-count" data-swiper-parallax="-500">
                                            <a href="#" class="friend-count-item">
                                                <div class="h6">73</div>
                                                <div class="title">Friends</div>
                                            </a>
                                            <a href="#" class="friend-count-item">
                                                <div class="h6">360</div>
                                                <div class="title">Photos</div>
                                            </a>
                                            <a href="#" class="friend-count-item">
                                                <div class="h6">11</div>
                                                <div class="title">Videos</div>
                                            </a>
                                        </div>
                                        <div class="control-block-button" data-swiper-parallax="-100">
                                            <a href="#" class="btn btn-control bg-blue">
                                                <svg class="olymp-happy-face-icon">
                                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-happy-face-icon"></use>
                                                </svg>
                                            </a>

                                            <a href="#" class="btn btn-control bg-purple">
                                                <svg class="olymp-chat-&#45;&#45;messages-icon">
                                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-chat-&#45;&#45;messages-icon"></use>
                                                </svg>
                                            </a>

                                        </div>
                                    </div>

                                    <div class="swiper-slide">
                                        <p class="friend-about" data-swiper-parallax="-500">
                                            Hi!, I’m Marina and I’m a Community Manager for “Gametube”. Gamer and
                                            full-time mother.
                                        </p>

                                        <div class="friend-since" data-swiper-parallax="-100">
                                            <span>Friends Since:</span>
                                            <div class="h6">December 2014</div>
                                        </div>
                                    </div>
                                </div>

                                &lt;!&ndash; If we need pagination &ndash;&gt;
                                <div class="swiper-pagination"></div>
                            </div>
                        </div>
                    </div>

                    &lt;!&ndash; ... end Friend Item &ndash;&gt;            </div>
            </div>
            <div class="col col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12">
                <div class="ui-block">

                    &lt;!&ndash; Friend Item &ndash;&gt;

                    <div class="friend-item">
                        <div class="friend-header-thumb">
                            <img src="img/friend7.jpg" alt="friend">
                        </div>

                        <div class="friend-item-content">

                            <div class="more">
                                <svg class="olymp-three-dots-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                </svg>
                                <ul class="more-dropdown">
                                    <li>
                                        <a href="#">Report Profile</a>
                                    </li>
                                    <li>
                                        <a href="#">Block Profile</a>
                                    </li>
                                    <li>
                                        <a href="#">Turn Off Notifications</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="friend-avatar">
                                <div class="author-thumb">
                                    <img src="img/avatar7.jpg" alt="author">
                                </div>
                                <div class="author-content">
                                    <a href="#" class="h5 author-name">Carol Summers</a>
                                    <div class="country">Los Angeles, CA</div>
                                </div>
                            </div>

                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <div class="friend-count" data-swiper-parallax="-500">
                                            <a href="#" class="friend-count-item">
                                                <div class="h6">49</div>
                                                <div class="title">Friends</div>
                                            </a>
                                            <a href="#" class="friend-count-item">
                                                <div class="h6">132</div>
                                                <div class="title">Photos</div>
                                            </a>
                                            <a href="#" class="friend-count-item">
                                                <div class="h6">5</div>
                                                <div class="title">Videos</div>
                                            </a>
                                        </div>
                                        <div class="control-block-button" data-swiper-parallax="-100">
                                            <a href="#" class="btn btn-control bg-blue">
                                                <svg class="olymp-happy-face-icon">
                                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-happy-face-icon"></use>
                                                </svg>
                                            </a>

                                            <a href="#" class="btn btn-control bg-purple">
                                                <svg class="olymp-chat-&#45;&#45;messages-icon">
                                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-chat-&#45;&#45;messages-icon"></use>
                                                </svg>
                                            </a>

                                        </div>
                                    </div>

                                    <div class="swiper-slide">
                                        <p class="friend-about" data-swiper-parallax="-500">
                                            Hi!, I’m Marina and I’m a Community Manager for “Gametube”. Gamer and
                                            full-time mother.
                                        </p>

                                        <div class="friend-since" data-swiper-parallax="-100">
                                            <span>Friends Since:</span>
                                            <div class="h6">December 2014</div>
                                        </div>
                                    </div>
                                </div>

                                &lt;!&ndash; If we need pagination &ndash;&gt;
                                <div class="swiper-pagination"></div>
                            </div>
                        </div>
                    </div>

                    &lt;!&ndash; ... end Friend Item &ndash;&gt;            </div>
            </div>
            <div class="col col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12">
                <div class="ui-block">

                    &lt;!&ndash; Friend Item &ndash;&gt;

                    <div class="friend-item">
                        <div class="friend-header-thumb">
                            <img src="img/friend8.jpg" alt="friend">
                        </div>

                        <div class="friend-item-content">
                            <div class="more">
                                <svg class="olymp-three-dots-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                </svg>
                                <ul class="more-dropdown">
                                    <li>
                                        <a href="#">Report Profile</a>
                                    </li>
                                    <li>
                                        <a href="#">Block Profile</a>
                                    </li>
                                    <li>
                                        <a href="#">Turn Off Notifications</a>
                                    </li>
                                </ul>
                            </div>

                            <div class="friend-avatar">
                                <div class="author-thumb">
                                    <img src="img/avatar8.jpg" alt="author">
                                </div>
                                <div class="author-content">
                                    <a href="#" class="h5 author-name">Michael Maximoff</a>
                                    <div class="country">Portland, OR</div>
                                </div>
                            </div>

                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <div class="friend-count" data-swiper-parallax="-500">
                                            <a href="#" class="friend-count-item">
                                                <div class="h6">58</div>
                                                <div class="title">Friends</div>
                                            </a>
                                            <a href="#" class="friend-count-item">
                                                <div class="h6">304</div>
                                                <div class="title">Photos</div>
                                            </a>
                                            <a href="#" class="friend-count-item">
                                                <div class="h6">19</div>
                                                <div class="title">Videos</div>
                                            </a>
                                        </div>
                                        <div class="control-block-button" data-swiper-parallax="-100">
                                            <a href="#" class="btn btn-control bg-blue">
                                                <svg class="olymp-happy-face-icon">
                                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-happy-face-icon"></use>
                                                </svg>
                                            </a>

                                            <a href="#" class="btn btn-control bg-purple">
                                                <svg class="olymp-chat-&#45;&#45;messages-icon">
                                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-chat-&#45;&#45;messages-icon"></use>
                                                </svg>
                                            </a>

                                        </div>
                                    </div>

                                    <div class="swiper-slide">
                                        <p class="friend-about" data-swiper-parallax="-500">
                                            Hi!, I’m Marina and I’m a Community Manager for “Gametube”. Gamer and
                                            full-time mother.
                                        </p>

                                        <div class="friend-since" data-swiper-parallax="-100">
                                            <span>Friends Since:</span>
                                            <div class="h6">December 2014</div>
                                        </div>
                                    </div>
                                </div>

                                &lt;!&ndash; If we need pagination &ndash;&gt;
                                <div class="swiper-pagination"></div>
                            </div>
                        </div>
                    </div>

                    &lt;!&ndash; ... end Friend Item &ndash;&gt;            </div>
            </div>-->
        </div>
    </div>

    <!-- ... end Friends -->


    <!-- Window-popup Update Header Photo -->

    <div th:replace="~{profilePageModal :: update-header-photo}"></div>
    <div th:replace="~{profilePageModal :: update-user-photo}"></div>


    <!-- ... end Window-popup Update Header Photo -->

    <!-- Window-popup Choose from my Photo -->

    <div class="modal fade" id="choose-from-my-photo" tabindex="-1" role="dialog"
         aria-labelledby="choose-from-my-photo"
         aria-hidden="true">
        <div class="modal-dialog window-popup choose-from-my-photo" role="document">

            <div class="modal-content">
                <a href="#" class="close icon-close" data-dismiss="modal" aria-label="Close">
                    <svg class="olymp-close-icon">
                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-close-icon"></use>
                    </svg>
                </a>
                <div class="modal-header">
                    <h6 class="title">Choose from My Photos</h6>

                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#home" role="tab"
                               aria-expanded="true">
                                <svg class="olymp-photos-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-photos-icon"></use>
                                </svg>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-expanded="false">
                                <svg class="olymp-albums-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-albums-icon"></use>
                                </svg>
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="modal-body">
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div class="tab-pane active" id="home" role="tabpanel" aria-expanded="true">

                            <div class="choose-photo-item" data-mh="choose-item">
                                <div class="radio">
                                    <label class="custom-radio">
                                        <img src="img/choose-photo1.jpg" alt="photo">
                                        <input type="radio" name="optionsRadios">
                                    </label>
                                </div>
                            </div>
                            <div class="choose-photo-item" data-mh="choose-item">
                                <div class="radio">
                                    <label class="custom-radio">
                                        <img src="img/choose-photo2.jpg" alt="photo">
                                        <input type="radio" name="optionsRadios">
                                    </label>
                                </div>
                            </div>
                            <div class="choose-photo-item" data-mh="choose-item">
                                <div class="radio">
                                    <label class="custom-radio">
                                        <img src="img/choose-photo3.jpg" alt="photo">
                                        <input type="radio" name="optionsRadios">
                                    </label>
                                </div>
                            </div>

                            <div class="choose-photo-item" data-mh="choose-item">
                                <div class="radio">
                                    <label class="custom-radio">
                                        <img src="img/choose-photo4.jpg" alt="photo">
                                        <input type="radio" name="optionsRadios">
                                    </label>
                                </div>
                            </div>
                            <div class="choose-photo-item" data-mh="choose-item">
                                <div class="radio">
                                    <label class="custom-radio">
                                        <img src="img/choose-photo5.jpg" alt="photo">
                                        <input type="radio" name="optionsRadios">
                                    </label>
                                </div>
                            </div>
                            <div class="choose-photo-item" data-mh="choose-item">
                                <div class="radio">
                                    <label class="custom-radio">
                                        <img src="img/choose-photo6.jpg" alt="photo">
                                        <input type="radio" name="optionsRadios">
                                    </label>
                                </div>
                            </div>

                            <div class="choose-photo-item" data-mh="choose-item">
                                <div class="radio">
                                    <label class="custom-radio">
                                        <img src="img/choose-photo7.jpg" alt="photo">
                                        <input type="radio" name="optionsRadios">
                                    </label>
                                </div>
                            </div>
                            <div class="choose-photo-item" data-mh="choose-item">
                                <div class="radio">
                                    <label class="custom-radio">
                                        <img src="img/choose-photo8.jpg" alt="photo">
                                        <input type="radio" name="optionsRadios">
                                    </label>
                                </div>
                            </div>
                            <div class="choose-photo-item" data-mh="choose-item">
                                <div class="radio">
                                    <label class="custom-radio">
                                        <img src="img/choose-photo9.jpg" alt="photo">
                                        <input type="radio" name="optionsRadios">
                                    </label>
                                </div>
                            </div>


                            <a href="#" class="btn btn-secondary btn-lg btn--half-width">Cancel</a>
                            <a href="#" class="btn btn-primary btn-lg btn--half-width">Confirm Photo</a>

                        </div>
                        <div class="tab-pane" id="profile" role="tabpanel" aria-expanded="false">

                            <div class="choose-photo-item" data-mh="choose-item">
                                <figure>
                                    <img src="img/choose-photo10.jpg" alt="photo">
                                    <figcaption>
                                        <a href="#">South America Vacations</a>
                                        <span>Last Added: 2 hours ago</span>
                                    </figcaption>
                                </figure>
                            </div>
                            <div class="choose-photo-item" data-mh="choose-item">
                                <figure>
                                    <img src="img/choose-photo11.jpg" alt="photo">
                                    <figcaption>
                                        <a href="#">Photoshoot Summer 2016</a>
                                        <span>Last Added: 5 weeks ago</span>
                                    </figcaption>
                                </figure>
                            </div>
                            <div class="choose-photo-item" data-mh="choose-item">
                                <figure>
                                    <img src="img/choose-photo12.jpg" alt="photo">
                                    <figcaption>
                                        <a href="#">Amazing Street Food</a>
                                        <span>Last Added: 6 mins ago</span>
                                    </figcaption>
                                </figure>
                            </div>

                            <div class="choose-photo-item" data-mh="choose-item">
                                <figure>
                                    <img src="img/choose-photo13.jpg" alt="photo">
                                    <figcaption>
                                        <a href="#">Graffity & Street Art</a>
                                        <span>Last Added: 16 hours ago</span>
                                    </figcaption>
                                </figure>
                            </div>
                            <div class="choose-photo-item" data-mh="choose-item">
                                <figure>
                                    <img src="img/choose-photo14.jpg" alt="photo">
                                    <figcaption>
                                        <a href="#">Amazing Landscapes</a>
                                        <span>Last Added: 13 mins ago</span>
                                    </figcaption>
                                </figure>
                            </div>
                            <div class="choose-photo-item" data-mh="choose-item">
                                <figure>
                                    <img src="img/choose-photo15.jpg" alt="photo">
                                    <figcaption>
                                        <a href="#">The Majestic Canyon</a>
                                        <span>Last Added: 57 mins ago</span>
                                    </figcaption>
                                </figure>
                            </div>


                            <a href="#" class="btn btn-secondary btn-lg btn--half-width">Cancel</a>
                            <a href="#" class="btn btn-primary btn-lg disabled btn--half-width">Confirm Photo</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- ... end Window-popup Choose from my Photo -->


    <a class="back-to-top" href="#">
        <img src="svg-icons/back-to-top.svg" alt="arrow" class="back-icon">
    </a>


    <!-- Window-popup-CHAT for responsive min-width: 768px -->

    <!--聊天窗口 -->
    <div th:replace="~{chatCommon :: chatCommon}"></div>
    <div th:replace="~{findFriendModel :: modal}"></div>
</div>
<!-- ... end Window-popup-CHAT for responsive min-width: 768px -->

<!-- JS Scripts -->
<script src="js/jQuery/jquery-3.4.1.js"></script>
<script src="js/libs/jquery.appear.js"></script>
<script src="js/libs/jquery.mousewheel.js"></script>
<script src="js/libs/perfect-scrollbar.js"></script>
<script src="js/libs/jquery.matchHeight.js"></script>
<script src="js/libs/svgxuse.js"></script>
<script src="js/libs/imagesloaded.pkgd.js"></script>
<script src="js/libs/Headroom.js"></script>
<script src="js/libs/velocity.js"></script>
<script src="js/libs/ScrollMagic.js"></script>
<script src="js/libs/jquery.waypoints.js"></script>
<script src="js/libs/jquery.countTo.js"></script>
<script src="js/libs/popper.min.js"></script>
<script src="js/libs/material.min.js"></script>
<script src="js/libs/bootstrap-select.js"></script>
<script src="js/libs/smooth-scroll.js"></script>
<script src="js/libs/selectize.js"></script>
<script src="js/libs/swiper.jquery.js"></script>
<script src="js/libs/moment.js"></script>
<script src="js/libs/daterangepicker.js"></script>
<script src="js/libs/fullcalendar.js"></script>
<script src="js/libs/isotope.pkgd.js"></script>
<script src="js/libs/ajax-pagination.js"></script>
<script src="js/libs/Chart.js"></script>
<script src="js/libs/chartjs-plugin-deferred.js"></script>
<script src="js/libs/circle-progress.js"></script>
<script src="js/libs/loader.js"></script>
<script src="js/libs/run-chart.js"></script>
<script src="js/libs/jquery.magnific-popup.js"></script>
<script src="js/libs/jquery.gifplayer.js"></script>
<script src="js/libs/mediaelement-and-player.js"></script>
<script src="js/libs/mediaelement-playlist-plugin.min.js"></script>
<script src="js/libs/ion.rangeSlider.js"></script>
<script src="js/main.js"></script>
<script src="js/libs-init/libs-init.js"></script>
<script defer src="fonts/fontawesome-all.js"></script>
<script src="Bootstrap/dist/js/bootstrap.bundle.js"></script>

<div th:replace="~{common :: common}"></div>
<script>
    $(document).on("click", "#header-photo", function () {
        document.getElementById("fileName0").click();
    });
    $(document).on("click", "#user-photo", function () {
        document.getElementById("fileName1").click();
    });
    $("#Friends").addClass("active");
</script>
</body>
</html>